<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>file/shell/smooth/resources/css/jquery.dataTables.css" />

<div class="page-title">
  <h2><?php echo $page_title; ?></h2>
</div>

<?php
  $msg = $this->session->flashdata('message');
  $div_class = $this->session->flashdata('div_class');

  if($msg){
  echo '<div class="box"><div id="box-messages">
      <div class="messages">
        <div id="message-success" class="message message-'.$div_class.'">
          <div class="image">
            <img src="'. base_url() .'file/shell/smooth/resources/images/icons/'.$div_class.'.png" alt="Success" height="32" />
          </div>
          <div class="text"><h6>'. $msg .'</h6></div>
          <div class="dismiss"><a href="#message-success"></a></div>
        </div>
      </div>
    </div></div>';
  }
?>

<table id="outlet-category" width="100%" class="dataTable">
  <thead>
    <tr>
      <th>Record ID</th>
      <th width="100px">ID Outlet</th>
      <th>Nama Outlet</th>
      <th>ID Sales</th>
      <th>Nama Sales</th>
      <th>Kategori Outlet</th>
      <th>Region</th>
      <th>Cluster</th>
    </tr>
  </thead>
  
  <tbody><!-- Here goes the datatables --></tbody>

</table>

<script type="text/javascript">
$(document).ready(function() {
  var user_group  = <?php echo $this->session->userdata('group'); ?>;
  var outlet_link = 
  $('#outlet-category').dataTable({
    "bProcessing": true,
    "bServerSide": true,
    // "bJQueryUI": true,
    "sAjaxSource": "<?php echo base_url('index.php/outlet/gridOutletCategory');?>/",
    "aoColumnDefs": [
      // { "bSortable": false, "aTargets": [3, 5,6] },
      { "bSearchable": false, "aTargets": [0] },
      // { "bSearchable": false, "aTargets": [5] },
      // { "bSearchable": false, "aTargets": [6] },
      // { "bSearchable": false, "aTargets": [7] },
    ],
    "fnRowCallback": function(nRow, aaData, iDisplayIndex, iDisplayIndexFull) 
    {
      $.post(
        "<?=base_url();?>index.php/outlet/fogit/",
        {outlet_id:aaData[0]},
        function(response) {
          var link = "<?php echo base_url() ?>index.php/outlet/category/delete/"+response;
          $('#outlet-category tbody tr').eq(iDisplayIndex).find('td').eq(-1).after('<td><a href="'+link+'">Delete</a></td>');
          $('#outlet-category tbody tr').eq(iDisplayIndex).find('td').eq(0).hide();
        }
      );
      $.post(
        "<?=base_url();?>index.php/outlet/fogit/",
        {outlet_id:aaData[1]},
        function(response) {
          var link = "<?php echo base_url() ?>index.php/outlet/view/"+response;
          $('#outlet-category tbody tr').eq(iDisplayIndex).find('td').eq(1).html('<a href="'+link+'">'+aaData[1]+'</td>');
        }
      );
      return nRow;
    }

  });
  $('#outlet-category thead tr').find('th').eq(0).hide();
  $('#outlet-category thead tr').find('th').eq(-1).after('<th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 100px" aria-label="Action">Action</th>');
});
</script>

<div id="test"></div>